<template>
  <div>
    <!-- 显示和隐藏,true显示(如果一开始没有，则创建)，false隐藏，它会删除此标签 -->
    <div v-if="show">我是v-if</div>
    <hr />
    <!-- 通过css来完成标签的显示或隐藏 true显示，false隐藏 -->
    <div v-show="show">我是v-show</div>
    <hr />
    <!-- 多条件判断 -->
    <div v-if="age < 10">儿童</div>
    <div v-else-if="age < 20">少年</div>
    <div v-else>老年</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      age: 11,
    };
  },
};
</script>

<style lang="scss">
[v-cloak] {
  display: none;
}
</style>
